<template>
  <template v-if="cfg.pdlogin() == false">
    <m-login-box />
  </template>
  <template v-else>
    <div class="_mbbox main">
      <n-h3>账号信息</n-h3>
      <div class="nbox1 nboxwhite">
        <div class="boxgap" v-if="cfg?.user?.uid != null">
          <div class="__box">
            <div class="__title">账号UID：</div>
            <div>{{ cfg.user.uid }}</div>
          </div>
          <div class="__box">
            <div class="__title">用户名称：</div>
            <div>{{ cfg.user.username }}</div>
          </div>
          <div class="__box">
            <div class="__title">账号等级：</div>
            <div>Level.{{ cfg.user.lv }}</div>
          </div>
        </div>
      </div>
      <n-h3>绑定信息</n-h3>
      <div class="nbox1 nboxwhite">
        <div class="boxgap" v-if="cfg?.user?.uid != null">
          <div class="__box">
            <div class="__title">B站UID：</div>
            <div>
              {{ cfg.user.buid }}　<n-button v-if="cfg.user.buid >= 1">解绑B站</n-button>
            </div>
          </div>
          <div class="__box">
            <div class="__title">QQopid：</div>
            <div>
              {{ cfg.user.opid }}　<n-button v-if="cfg.user.buid >= 1">解绑QQ</n-button>
            </div>
          </div>
        </div>
      </div>
      <n-h3>我的权限</n-h3>
      <div class="nbox1 nboxwhite">
        <div class="boxgap" v-if="cfg?.user?.uid != null">
          <div class="__box" v-for="item in set.group">
            <div class="__title">{{ set.gname[item] }}：</div>
            <div>
              <template v-if="cfg.user?.group?.[item] == true">拥有权限</template
              ><template v-else>未拥有权限</template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
</template>
<style scoped>
.__box {
  display: flex;
  gap: 0.75em;
  align-items: center;
}
.__title {
  width: 6em;
  text-align: right;
}
</style>
<script>
import { cfg } from "@/cfg/cfg.js";

export default {
  setup() {
    const set = {
      gname: {
        ordinary_user: "普通用户",
        admin: "管理员站长",
        Introduction: "管理组成员",
      },
      group: ["ordinary_user", "admin", "Introduction"],
    };
    const val = reactive({});

    onMounted(async () => {});
    return { cfg, set };
  },
};
</script>
